<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/ehome/static/css/layui.css" media="all">
    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
    <!--layui的js部分-->
    <script src="/ehome/static/layui.js"></script>
    <script src="/ehome/static/lib/jquery-3.1.1.min.js"></script>
    <script src="/ehome/static/lib/jquery.cookie.js"></script>

    <style>
        body {
            background-color: lightgray;

        }

        h2 {
            text-align: center;
            margin: 30px auto;
            color: darkgray;
            line-height: 60px;
        }

        div.layadmin-user-login-main {
            width: 50%;
            margin: 0 auto;
            background-color: white;
        }

        .ehome-input {
            float: left;
            width: 85%;
            margin-left: 20px;

        }

        .ehome-input-label {
            display: block;
            float: left;
            height: 36px;
            width: 30px;
            line-height: 36px;
            margin-left: -28px;
        }

    </style>
</head>
<body>

<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="width:600px;margin: 200px auto;">

    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>管理员登录</h2>
        </div>

        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <!--用户名输入框部分-->
            <div class="layui-form-item">
                <input type="text" name="jobNumber" id="jobNumber" lay-verify="required" placeholder="工号"
                       class="layui-input ehome-input" maxlength="20" value="GL001">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username ehome-input-label" for="jobNumber"
                       id="jobNumberLabel"></label>
            </div>
            <!--用户密码输入框部分-->
            <div class="layui-form-item">

                <input type="password" name="password" id="password" lay-verify="required" placeholder="密码"
                       class="layui-input ehome-input" maxlength="20" value="123456">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password ehome-input-label" for="password"
                       id="passwordLabel"></label>
            </div>
            <div class="layui-form-item">
                <button id="loginBtn" class="layui-btn layui-btn-fluid layui-btn layui-btn-disabled" lay-submit
                        lay-filter="LAY-user-login-submit" disabled="disabled">登 入
                </button>
            </div>

            <!--滑块-->

            <div id="your-dom-id" class="nc-container"></div> <!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->

            <script type="text/javascript">
                var nc_token = ["FFFF0N000000000093B3", (new Date()).getTime(), Math.random()].join(':');
                var NC_Opt =
                    {
                        renderTo: "#your-dom-id",
                        appkey: "FFFF0N000000000093B3",
                        scene: "nc_login",
                        token: nc_token,
                        customWidth: 300,
                        trans: {"key1": "code0"},
                        elementID: ["usernameID"],
                        is_Opt: 0,
                        language: "cn",
                        isEnabled: true,
                        timeout: 3000,
                        times: 5,
                        apimap: {
                            // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                            // 'get_captcha': '//b.com/get_captcha/ver3',
                            // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
                            // 'get_img': '//c.com/get_img',
                            // 'checkcode': '//d.com/captcha/checkcode.jsonp',
                            // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
                            // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
                            // 'umid_serUrl': 'https://g.com/service/um.json'
                        },
                        callback: function (data) {
                            /* window.console && console.log(nc_token)
                             window.console && console.log(data.csessionid)
                             window.console && console.log(data.sig)*/

                            //验证通过的时候，让登录按钮可用
                            console.log($("#loginBtn"))
                            $("#loginBtn").removeAttr("disabled");
                            $("#loginBtn").removeClass("layui-btn-disabled")
                        }
                    }
                var nc = new noCaptcha(NC_Opt)
                nc.upLang('cn', {
                    _startTEXT: "请按住滑块，拖动到最右边",
                    _yesTEXT: "验证通过",
                    _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
                    _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
                })
            </script>

        </div>
    </div>

</div>

<script>
    //单独引入jQuery
    $(function () {
        //实现点击切换验证码, 这里有个技巧,图片点击实现切换的前提,是必须保证每次产生的地址不同,利用地址中的参数:  localhost:8080/code?随机数
        /* $("#code_img").click(function(){
              $(this).attr("src","");
          });*/

        // 当启动登录页，判断浏览器是否保存过cookie（前段方法）
        /* var cookie = $.cookie("jobNumber");
         if (cookie) {
             //前端页面跳转到首页：window.location.href = "目标地址"
             location.href = "/ehome/static/html/index.html";
         }*/

    });

    // layui引用模块操作
    layui.use(['form', 'jquery'], function () {

       var $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , router = layui.router()
            , search = router.search;


        form.render();   // 执行表单渲染

        //表单提交事件
        form.on('submit(LAY-user-login-submit)', function (obj) {
            console.log(1)
            // ajax提交:后端使用@RequestBody,需要前端ajax中的data做处理
            $.ajax({
                url:"/ehome/sysUser/login"
                , type: "post"
                , dataType: "json"
                // ,contentType:"application/json;charset=UTF-8" // 后端用RequestBody接收时要加上
                ,data:obj.field
                , success: function (returnData) {
                    //console.log(returnData.msg)
                    layer.msg(returnData.msg)
                    if (returnData.code == "0") {
                        location.href = "/ehome/static/html/index.html";
                    }
                    else {

                    }
                }, error: function (e) {
                    console.log(e)

                }
            })

        });

    });
</script>
</body>
</html>